$(function() {
    var show    = $('.slideShow'),
        pic_c   = show.find('.pics'),
        pics    = pic_c.find('li'),
        pois    =
        curr_i  = null,
        len     = pics.length,
        idx     = 0,                    // 默认显示 第一张
        idx_m   = len-1,
        w_wid   = win.width(),
        b_wid   = parseInt(show.data('width'), 11),                  // banner 的宽高, 需要在程序上编辑/确定
        b_hei   = parseInt(show.data('height'), 10),                 // 需要banner的宽高比例来确定banner区的最佳高度
        s_hei   = Math.floor(w_wid * b_hei / b_wid),

        // 控制滑动需要用到的变量
        touch   =
        start_x =
        start_y =
        move_x  =
        move_y  =
        end_x   = 0,
        isDireGetted =                  // 是否获取了方向
        isDireX = false,                // 手指滑动方向
        dist    = -w_wid,               // 滚动的距离

        // 自动滚动
        timeout = -1,
        delay   = 3000,                 // 自动滚动间隔
        isAutoSlide = false;

    // 初始化
    win.on('load', function() {
        console.log("加载滑动");
        // 根据banner图的个数, 创建相应的指示点.
        pois =createPointing(show, len);
        curr_i = pois.eq(idx).addClass('on');
        // 父类的高度 = 窗口高度 * banner图高度 / banner图宽度
        show.height(s_hei);
        // 容器的宽度 = 子项个个数 * 窗口宽度
        pic_c.width(len * w_wid)
        // 初始化容器滑动
          .on('touchstart', tStart)
          .on('touchmove', tMove)
          .on('touchend', tEnd);

        // 初始化每个子项的宽度, 因为子项个个数是不定的, 父类(pic_c)的宽度是不定的, 窗口的宽度也是未知的, 所以不能用css来设置子项宽度(除非用响应式, 但在这里没有用js方便).
        pics.width(w_wid);

        // 在初始化的最后启用自动滑动
        autoSlide();
        isAutoSlide = true;

        // banner离开视口范围自动停止轮播
        body.addEventListener('touchmove', function() {
            if ( body.scrollTop>s_hei ) {
                if (isAutoSlide) {
                    clearTimeout(timeout);
                    isAutoSlide = false;
                }
            } else {
                if (!isAutoSlide) {
                    autoSlide();
                    isAutoSlide = true;
                }
            }
        });
    });

    // 手指滑动控制, 对应 touchstart, touchmove, touchend
    function tStart(e) {
        ifTargetIsNotMenu = true;
        touch = e.touches[0];
        start_x = touch.pageX;
        start_y = touch.pageY;
        // pic_c.addClass('noAnim');
        pic_c.get(0).className = 'pics noAnim';
        isDireGetted = false;
    }
    function tMove(e) {
        if (isDireGetted) {
            if (isDireX) {
                e.preventDefault();
                move_x = end_x + e.touches[0].pageX - start_x;
                // 如果是第一个, 禁止向右滑动; 如果是最后一个, 禁止向左滑动;
                // 写在move方法这里表示: 在滑动期间就禁止;
                if ((idx===0&&move_x>0)||(idx===idx_m&&move_x<end_x)) return;
                pic_c.css('-webkit-transform', 'translate('+move_x+'px, 0px) translateZ(0px)');
            }
        } else {
            touch = e.touches[0];
            move_x = touch.pageX;
            move_y = touch.pageY;
            isDireX = Math.abs(move_x - start_x) > Math.abs(move_y - start_y);
            isDireGetted = true;
        }
    }
    function tEnd(e) {
        // pic_c.removeClass('noAnim');
        pic_c.get(0).className = 'pics';
        move_x = e.changedTouches[0].pageX-start_x;
        if (move_x === 0) {
            autoSlide();
            return;
        }
        // 如果向右滑, 则认为是滑到下一个
        else if (move_x > 0) {
            // 如果向右滑, 并且超过90像素, 则认为触发切换(上一张)
            if (move_x>90 && idx!==0) {--idx;}
        }
        // 如果是向左滑, 则认为是滑到上一个
        else {
            // 如果向左滑, 并且超过90像素, 则认为触发切换(到下一张)
            if (move_x<-90 && idx!==idx_m) {++idx;}
        }
        // 滑动, 并记录最终滑动到的位置
        slide(end_x = idx * dist);
        isDireX = false;
    }

    // 滑动
    function slide(dist) {
        clearTimeout(timeout);
        curr_i.removeClass('on');
        curr_i = pois.eq(idx).addClass('on');
        pic_c.css('-webkit-transform', 'translate('+dist+'px, 0px) translateZ(0px)');
        autoSlide();
    }
    function autoSlide() {
        timeout = setTimeout(function() {
            idx = (idx===idx_m)? 0: idx+1;
            end_x = idx * dist;
            slide(end_x);
        }, delay);
    }

    function createPointing(sup, len) {
        var i,
            pois,
            txt = "<ul class='pois'>";

        for (i=0; i<len; i++) {
            txt += '<li></li>';
        }
        txt += '</ul>';
        pois = $(txt);
        sup.append(pois);
        return pois.children();
    }
}());